<template>
  <div class="addSatisfaction">
    <el-form style="padding-top:20px;" label-position="top" :model="formData" class="demo-form-stacked" ref="formData" :rules="rules" v-if="reload">
      <div class="skill-name pb20">
        <p style="margin-bottom:5px;">
          <el-checkbox v-model="formData.state" style="padding-right: 5px">
          </el-checkbox>{{$t('config.channel.satisfactionOption')}}</p>
        <el-form-item prop="optionName">
          <el-input v-model="formData.optionName" :placeholder="$t('public.pleaseEnter')"></el-input>
        </el-form-item>
      </div>
      <div class="skill-name pb20">
        <p style="margin-bottom:5px;">
          <el-checkbox v-model="formData.state2" style="padding-right: 5px" disabled>
          </el-checkbox>{{$t('config.channel.satisfactionVal')}}</p>
        <el-form-item prop="valName">
          <el-input v-model="formData.valName" :placeholder="$t('public.pleaseEnter')"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <div v-if="!isSimpleConfig" style="clear: both">
      <el-button type="primary" class="primary_btn" @click="submit">{{$t('public.save')}}</el-button>
    </div>
    <div v-if="isSimpleConfig" class="footer">
      <el-button class='slide-box__button' @click='cancelClick'>
        {{$t('public.cancel')}}
      </el-button>
      <el-button class='slide-box__button' type="primary" @click="submit">
        {{$t('public.save')}}
      </el-button>
    </div>
  </div>
</template>
<script>
  import {deepClone} from '@/utils/m7Utils.js'
  export default {
    name: 'addSatisfaction',
    data () {
      let NumRegex = new RegExp('^[0-9]{1}$')
      var validateOptName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error(this.$t('validate.required')))
        } else if (!NumRegex.test(value)) {
          callback(new Error(this.$t('config.channel.satisfactionValRange')))
        } else {
          callback()
        }
      }
      return {
        reload: false,
        formData: {
          optionName: '',
          state: '2',
          valName: '',
          state2: ''
        },
        rules: {
          optionName: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
          ],
          valName: [
            {required: true, validator: validateOptName, trigger: 'blur'}
          ]
        },
        flag: false,
        satOption: '',
        satisObject: {
          name: '',
          state: '',
          options: [
            {
              name: '',
              state: ''
            }
          ]
        },
        list: [],
        MemberToken: [],
        arr: {}
      }
    },
    props: {
      satisfyInfo: {
        type: Object,
        default: {}
      },
      dataList: {
        type: Object,
        default: {}
      },
      isSimpleConfig: {
        type: Boolean,
        default: function () {
          return false
        }
      }
    },
    methods: {
      handleData (arr) {
        let _data = []
        arr.forEach((item) => {
          var obj = {
            name: item.name,
            key: item.key,
            state: item.state
          }
          _data.push(obj)
          if (item.options) {
            this.handleData(item.options)
          }
        })
        this.list = deepClone(_data)
      },
      isEmptyObject (obj) {
        for (let key in obj) {
          return false
        }
        return true
      },
      handleState () {
        if (!this.isEmptyObject(deepClone(this.satisfyInfo))) {
          this.satisObject = deepClone(this.satisfyInfo)
          this.satisfyInfo.options[0].state === '1' ? this.satisObject.options[0].state = false : this.satisObject.options[0].state = true
          this.satisfyInfo.state === '1' ? this.satisObject.state = false : this.satisObject.state = true
        } else {
          this.satisObject = {
            name: 'a',
            state: true,
            options: [{
              name: 0,
              state: true
            }]
          }
        }
        this.formData.optionName = this.satisObject.name
        this.formData.state = this.satisObject.state
        this.formData.valName = this.satisObject.options[0].name
        this.formData.state2 = this.satisObject.options[0].state
      },
      cancelClick () {
        this.$emit('cancelClick')
      },
      submit () {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            this.list = []
            this.satisObject.name = this.formData.optionName
            this.satisObject.state = this.formData.state
            this.satisObject.options[0].name = this.formData.valName
            this.satisObject.options[0].state2 = this.formData.state2
            let data = deepClone(this.satisObject)
            console.log(data)
            data.state === true ? data.state = '2' : data.state = '1'
            data.options[0].state === true ? data.options[0].state = '2' : data.options[0].state = '1'
            if (data.name === '') {
              return
            }
            if (!data.options[0].name) {
              return
            }
            if (!data.options[0].name.match('^[0-9]{1}$')) {
//          this.$message.error(this.$t('config.channel.satisfactionValRange'))
              return
            }
//        let arr = this.$store.state.session.dicMap.options.filter(item => {
//          return item.name === '满意度调查选项'
//        })
            console.log(this.arr.options)
//        将多维数组处理成一维数组
//            this.handleData(this.arr.options)
//        过滤出满意度选项与当前值是否相同
            let _option = deepClone(this.arr.options)
            let option = _option.filter(item => {
              return (item.name === data.name) && (item.key !== data.key)
            })
//        过滤出满意值与当前值是否相同
            let _option1 = deepClone(this.arr.options)
            console.log(_option1)
            let value = _option1.filter(item => {
              console.log(item)
              return (item.options[0].name === data.options[0].name) && (item.options[0].key !== data.options[0].key)
            })
            console.log(value)
            let stateFlag = this.arr.options.filter(item => {
              return item.state === '2' && item.key !== data.key
            })
            if (stateFlag.length === 0 && data.state === '1') {
              this.$message.error(this.$t('config.channel.leastOpenOne'))
              return
            }
            if (option.length !== 0) {
              this.$message.error(this.$t('config.channel.satisfactionOptReapt', {name: option[0].name}))
              return
            }
            if (value.length !== 0) {
              this.$message.error(this.$t('config.channel.satisfactionValReapt'))
              return
            }
            let mark = false   // 判定是添加还是修改
            this.arr.options.forEach((item, index) => {
              if (item.key === data.key) {
                mark = true
                this.arr.options[index] = data
              }
            })
            if (!mark) {
              this.arr.options.push(data)
            }
            this.$store.dispatch('updateOneAppDic', this.arr).then((res) => {
              if (res.success) {
                this.$message.success(this.$t('config.channel.saveSuccess'))
                this.$emit('refresh')
              } else {
                this.$message.error(this.$t('config.channel.saveError'))
              }
            })
          }
        })
      }
    },
    watch: {
      satisfyInfo () {
        this.reload = false
        this.$nextTick(() => {
          this.reload = true
          this.handleState()
        })
      },
      dataList () {
        this.arr = deepClone(this.dataList)
      }
    },
    beforeMount () {
      this.reload = true
      this.handleState()
      this.arr = deepClone(this.dataList)
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .addSatisfaction
    height 100%
    padding 0 20px
    padding-bottom 0
    position relative
    .el-input,.el-select
      width 220px
    .skill-name,.assign-rule
      float left
    .skill-name
      margin-right 30px
    .ismemory
      clear both
    .pb20
      padding-bottom 20px
    .tishi
      color $c-prompt
    .tip
      cursor pointer
      display inline-block
      height 16px
      width 16px
      border 1px solid $c-main
      text-align center
      line-height 16px
      border-radius 50%
      margin-left 2px
      .iconfont
        font-size 10px
        color $c-main
  .footer
    position absolute
    bottom 0
    left 0
    width 100%
    background rgba(255,255,255,1)
    box-shadow 0px -2px 4px 0px rgba(5,49,38,0.05)
    border-top 1px solid rgba(232,232,232,1)
    display flex
    justify-content center
    padding 13px 0
    box-sizing border-box
    .slide-box__button
      padding 8px 20px 8px
      box-sizing border-box
</style>
